import {useReducer} from "react";


//官网上说useReducer是useState的替代方案
//在某些场景中useReducer比useState更好用
function Reducer () {
    //初始化usereducer
    //usereducer和usestate是不一样的
    //usereducer接收两个参数第一个参数可以是一个回调函数，也可以是一个匿名函数
    // 回调函数中传入两个值：第一个参数是初始值的形参，第二个值就是你自定义的事件名，也可以是其他的
    //第二个参数是一个初始值,如果第二个值是引用数据类型那么action需要加一个type属性
    //调用useReducer时会返回两个值，第一个时state，第二个是dispatch
    // 一个是值，一个是发送
    let [ state , dispatch ] = useReducer( (state,action) => {
        switch (action) {
            case 'add':
                return state+1
            case 'even':
                return state-1
            default:
                console.log(state);
        }
    //    这里定义的0
    } ,0 )
    return (
        <div>
            <p>dispatch发送action函数里面的内容</p>
            <p>
                <button onClick={() => {dispatch('add')}}>加</button>
            </p>
            <p>
                {state}
            </p>
            <p>
                <button onClick={ () =>{dispatch('even')} }>减</button>
            </p>
        </div>
    )
}

export default Reducer